//加载公共样式
require('../../assets/css/index.less')
    //加载自己的样式
require('./user-detail.less')

//服务器地址
const API = 'http://fitness.h5.itsource.cn:3701'

//引入axios工具函数
const request = require('../../utils/request')

window.onload = () => {


    //获取dom
    const upload = document.querySelector('#upload')
    const nickName = document.querySelector('#nickName')
    const showCityPicker = document.querySelector('#showCityPicker')
    const avatar = document.querySelector('#avatar')
    const selCity = document.querySelector('#selCity')
    let cityId = ''
    let provinceId1 = ''
    const showSexPicker = document.querySelector('#showSexPicker')
    const selSex = document.querySelector('#selSex')
    const showDatePicker = document.querySelector('#showDatePicker')
    const showProvincePicker = document.querySelector('#showProvincePicker')
    const text = document.querySelector('#text')
    const textLength = document.querySelector('#textLength')
    const pupup = document.querySelector('.weui-half-screen-dialog')
    const submit = document.querySelector('#submit')
    let selBirthday = document.querySelector('#selBirthday')

    //获取用户信息
    function getUserInfo() {
        request.get('/api/user/info').then(res => {
            //1 解构数据
            let { errno, data } = res.data
                //2 判断
            if (errno === 0) {
                //3 处理业务逻辑
                render(data)
            }
        })
    }

    //初始化数据回显
    function render(data) {
        //图片渲染 服务器地址+相对路径+文件名
        avatar.src = API + data.imgUrl
        nickName.value = data.nickName
        selSex.textContent = data.gender ? data.gender : '请选择性别' //空值合并,
        selBirthday.textContent = data.birthday ? data.birthday : '请选择生日' //空值合并
        text.value = data.sign;
    }

    //初始化获取用户信息
    getUserInfo()

    //监听file 输入框的change事件
    upload.addEventListener('change', e => {
        console.log('e :>> ', e.target.files[0])
            //创建FormData 对象 添加文件
        const formData = new FormData()
        formData.append('file', e.target.files[0])
            //发送ajax请求
        request.post('/api/circles/uploadImg', formData).then(res => {
            console.log('res.data :>> ', res.data)
                //回显头像
                //解构数据
            let { errno, data } = res.data
                //判断
            if (errno === 0) {
                avatar.src = API + data.url
            }
        })
    })

    //获取dom给头像绑定点击事件

    avatar.addEventListener('click', () => {
        //让上传按钮 触发点击事件
        upload.click()
    })

    //性别
    showSexPicker.addEventListener('click', () => {
        weui.picker(
            [{
                    label: '男',
                    value: 0,
                },
                {
                    label: '女',
                    value: 1,
                },
            ], {
                //确定才选中
                onConfirm: function(result) {
                    selSex.textContent = result[0].label
                },
                title: '性别选择',
            }
        )
    })

    //生日选择器

    //监听下拉点击
    showDatePicker.addEventListener('click', () => {
        weui.datePicker({
            start: 1990,
            end: new Date().getFullYear(),
            onConfirm: function(result) {
                console.log(result)
                selBirthday.textContent = result.map(v => String(v.value).padStart(2, '0')).join('-')
            },
            title: '选择生日',
        })
    })

    //省份选择
    let provinces = [] //储存省份
        //获取所有省份
    function getProvinces() {
        request.get('/api/shared/province').then(res => {
            //解构数据
            let { errno, data } = res.data
                //判断
            if (errno === 0) {
                //处理数据
                provinces = data.map(v => {
                    return {
                        label: v.name,
                        value: v.id,
                    }
                })
            }
        })
    }
    getProvinces()

    //省份选择器
    const selProvince = document.querySelector('#selProvince')
    showProvincePicker.addEventListener('click', () => {
        weui.picker(provinces, {
            //确定才选中
            onConfirm: function(result) {
                //数据回显
                selProvince.textContent = result[0].label
                provinceId1 = result[0].value
                    //获取城市信息
                getCity(result[0].value)
            },
            title: '省份选择',
        })
    })

    //获取城市
    let pickerOldHandler = null //用于储存上一次的 弹窗函数
    function getCity(provinceId) {
        request
            .get('/api/shared/city', {
                params: {
                    provinceId,
                },
            })
            .then(res => {
                //解构数据
                let { errno, data } = res.data
                    //判断
                if (errno === 0) {
                    //处理数据
                    let citys = data.map(v => ({ label: v.name, value: v.id }))

                    //设置一个容器存储函数体
                    function handler() {
                        weui.picker(citys, {
                            //确定才选中
                            onConfirm: function(result) {
                                //数据回显
                                selCity.textContent = result[0].label
                                cityId = result[0].value
                            },
                            title: '城市选择',
                        })
                    }

                    //清除上一次的点击事件
                    showCityPicker.removeEventListener('click', pickerOldHandler)
                        //把这一次的弹窗函数 赋值给外层变量.使得pickerOldHandler进入闭包存储起来
                    pickerOldHandler = handler

                    //获取数据之后 再绑定选择器 渲染内容
                    showCityPicker.addEventListener('click', handler)
                }
            })
    }

    //文本域监听
    text.addEventListener('input', () => {
        //span的内容 = 输入字的长度
        textLength.textContent = text.value.length
    })

    //提交表单
    submit.addEventListener('click', () => {
        request
            .post('/api/user/changeInfo', {
                nickName: nickName.value,
                gender: selSex.textContent,
                provinceId: provinceId1,
                cityId: cityId,
                birthday: selBirthday.textContent,
                imgUrl: avatar.src.replace(API, ''),
                sign: text.value,
            })
            .then(res => {
                console.log('res.data :>> ', res.data)
                    //解构数据
                let { errno, data } = res.data
                    //判断
                if (errno === 0) {
                    //更新token
                    localStorage.setItem('token', 'Bearer ' + data.token)
                }
            })
    })
}